<template>
    <div>
        <el-dialog
            :title="$t('site.ElectricPrice')"
            :visible="visibleShow"
            class="el-dialog-lg"
            @opened="getElectricityprice"
            @close="close">
            <el-form ref="form" :model="form" label-width="200px" >
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item :label="$t('site.currencyType')" prop="currencyCode" :rules="[{ required: true, message: $t('index_js_notNull')}]" >
                            <el-select v-model="form.currencyCode" filterable :placeholder="$t('pleaseSelect')">
                                <el-option
                                v-for="item in currencyData"
                                :key="item.code"
                                :label="item.code"
                                :value="item.code">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item :label="$t('site.onGridPrices')" prop="onGridPrices" :rules="[{validator:test_num,trigger:'blur'}]">
                            <el-input v-model="form.onGridPrices" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider content-position="center">
                    {{$t('site.selfTariff')}}
                    <el-tooltip content="slot">
                        <i class="el-icon-warning"></i>
                        <span class="price-hint" slot="content">
                            <i class="fa fa-info-circle"></i>
                            <ul class="mytip">
                                <li>{{$t('site.price_hint_1')}}</li>
                                <li>{{$t('site.price_hint_2')}}</li>
                            </ul>
                        </span>
                    </el-tooltip>
                </el-divider>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item :label="$t('site.onPeakHours')">
                            <el-time-select
                                style="width:104px"
                                :placeholder="$t('index.startTime')"
                                v-model="form.onPeakHoursBegin"
                                :picker-options="{
                                start: '00:00',
                                step: '00:15',
                                end: '24:00',
                                maxTime:form.onPeakHoursEnd
                                }">
                            </el-time-select>
                            -
                            <el-time-select
                                style="width:104px"
                                :placeholder="$t('index.endTime')"
                                v-model="form.onPeakHoursEnd"
                                :picker-options="{
                                start: '00:00',
                                step: '00:15',
                                end: '24:00',
                                minTime: form.onPeakHoursBegin,
                                maxTime:form.offPeakHoursBegin
                                }">
                            </el-time-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item :label="$t('site.onPeakPrice')" prop="onPeakPrice" :rules="[{validator:test_num,trigger:'blur'}]">
                            <el-input v-model="form.onPeakPrice" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item :label="$t('site.offPeakHours')">
                            <el-time-select
                                style="width:104px"
                                :placeholder="$t('index.startTime')"
                                v-model="form.offPeakHoursBegin"
                                :picker-options="{
                                start: '00:00',
                                step: '00:15',
                                end: '24:00',
                                minTime:calcMinutes(form.onPeakHoursEnd),
                                maxTime:form.offPeakHoursEnd
                                }">
                            </el-time-select>
                            -
                            <el-time-select
                                style="width:104px"
                                :placeholder="$t('index.endTime')"
                                v-model="form.offPeakHoursEnd"
                                :picker-options="{
                                start: '00:00',
                                step: '00:15',
                                end: '24:00',
                                minTime: form.offPeakHoursBegin,
                                maxTime:form.shoulderHoursBegin
                                }">
                            </el-time-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item :label="$t('site.offPeakPrice')" prop="offPeakPrice" :rules="[{validator:test_num,trigger:'blur'}]">
                            <el-input v-model="form.offPeakPrice" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item :label="$t('site.shoulderHours')">
                            <el-time-select
                                style="width:104px"
                                :placeholder="$t('index.startTime')"
                                v-model="form.shoulderHoursBegin"
                                :picker-options="{
                                start: '00:00',
                                step: '00:15',
                                end: '24:00',
                                minTime:calcMinutes(form.offPeakHoursEnd),
                                maxTime:form.shoulderHoursEnd
                                }">
                            </el-time-select>
                            -
                            <el-time-select
                                style="width:104px"
                                :placeholder="$t('index.endTime')"
                                v-model="form.shoulderHoursEnd"
                                :picker-options="{
                                start: '00:00',
                                step: '00:15',
                                end: '24:00',
                                minTime: form.shoulderHoursBegin,
                                maxTime:form.period4Start
                                }">
                            </el-time-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item :label="$t('site.shoulderPrice')" prop="shoulderPrice" :rules="[{validator:test_num,trigger:'blur'}]">
                            <el-input v-model="form.shoulderPrice" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item :label="$t('site.fourHours')">
                            <el-time-select
                                style="width:104px"
                                :placeholder="$t('index.startTime')"
                                v-model="form.period4Start"
                                :picker-options="{
                                start: '00:00',
                                step: '00:15',
                                end: '24:00',
                                minTime:calcMinutes(form.shoulderHoursEnd),
                                maxTime:form.period4End
                                }">
                            </el-time-select>
                            -
                            <el-time-select
                                style="width:104px"
                                :placeholder="$t('index.endTime')"
                                v-model="form.period4End"
                                :picker-options="{
                                start: '00:00',
                                step: '00:15',
                                end: '24:00',
                                minTime: form.period4Start
                                }">
                            </el-time-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item :label="$t('site.fourPrice')" prop="shoulderPrice" :rules="[{validator:test_num,trigger:'blur'}]">
                            <el-input v-model="form.period4Price" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setVisibleShow',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('save')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        siteId:''
    },
    data() {
        this.test_num = async(rule, value, callback) => {
            if(value!=''&&!this.Regs.num_reg.test(value)){
                callback(new Error(this.$t('index_js_mustbeNum')));
            }else{
                callback();
            }
        }
        return {
            currencyData:[],
            form:{
                currencyCode:'',
                onPeakHoursBegin:'',
                onPeakHoursEnd:'',
                onPeakPrice:'',
                offPeakHoursBegin:'',
                offPeakHoursEnd:'',
                offPeakPrice:'',
                shoulderHoursBegin:'',
                shoulderHoursEnd:'',
                shoulderPrice:'',
                onGridPrices:'',
                period4Start:'',
                period4End:'',
                period4Price:'',
            }
        };
    },
    computed: {
        visibleShow(){
            return this.$store.state.sysStore.visibleShow
        }
    },
    mounted(){
        this.getCurrency()
    },
    methods: {
        /*减15分钟 */
        calcMinutes(time){
            if(time){
                let timeArr=time.split(":")
                let hour=Number(timeArr[0])
                let minutes=Number(timeArr[1])
                let _hour,_minutes
                if(minutes==0){
                    if(_hour!=0){
                        _hour=hour-1
                        _minutes=45
                    }else{
                        _hour=0
                        _minutes=0
                    }
                }else{
                    _hour=hour
                    _minutes=minutes-15
                }
                _hour=_hour<10?'0'+_hour:_hour
                _minutes=_minutes<10?'0'+_minutes:_minutes
                return _hour+':'+_minutes
            }
        },
        returnMinites(time){
            let result;
            if(typeof time =='string'){
                if(time.indexOf(":")==2){
                    result = time
                }else if(time=='null'){
                    result = ''
                }else{
                    
                    time=Number(time)
                    var hour = parseInt(time/3600);
                    var minites = (time%3600)/60;
                    var hour = hour<10?"0"+hour:hour;
                    var minites = minites<10?"0"+minites:minites;
                    result = hour+ ":" +minites; 
                }
            }else{
                result = ''
            }
            console.log(typeof time,time,result,'time--------------')
            return result;
        },
        async getCurrency(){
            let res = await this.API.getCurrency({})
            this.currencyData = res || []
        },
        async getElectricityprice(){
            let res = await this.API.getElectricityprice({siteId:this.siteId})
            for(let key in this.form){
                if(res[key]!=null){
                    this.form[key]=res[key];
                    if(key=='onGridPrices') this.form[key]=res[key].toString()
                }else{
                    this.form[key]='';
                }
                if(key=='onPeakHoursBegin'||key=='onPeakHoursEnd'||key=='offPeakHoursBegin'||key=='offPeakHoursEnd'||key=='shoulderHoursBegin'||key=='shoulderHoursEnd'||key=='period4Start'||key=='period4End'){
                    this.form[key]=this.returnMinites(res[key])
                }
            }
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.commitForm()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async commitForm(){
            this.form.onGridPrices=this.form.onGridPrices||'0'
            let res = await this.API.setElectricityprice(
                Object.assign(this.form,{siteId:this.siteId})
            )
            if(res.success){
                this.$message.success(this.$t('index.control_success'));
            }else{
                this.$message.error(this.$t('index.control_fail'));
            }
            this.close()
            this.$emit('uploadPage',true)
        },
        close(){
            this.$store.commit('setVisibleShow',false)
            this.$refs['form'].resetFields();
        }
    }
};
</script>

<style  lang="less">
    .el-date-editor--timerange.el-input__inner {
        width: 224px;
    }
</style>
